基本的頁面建構都講的差不多了，今天我們開始來深入學習頁面內容編輯時，常用到的功能吧！

v-bind绑定class實做

之前有說過v-bind是屬性綁定的意思，我們可以用它來綁class進去，這樣就能動態控制css了，完整的寫法為
v-bind:class，老樣子為了增加效率一樣使用簡寫:class，現在就來簡單試一組看看：

<template>
  <div class="news">
    <div class="box" :class="{ red_color: coloring }"></div>
  </div>
</template>

<script>
export default {
  name: 'news',
  data() {
    return {
      coloring: true
    }
  }
}
</script>

<style scoped>
  .box {
    border: 1px solid #cccccc;
    width: 100px;
    height: 100px;
  }
  .red_color {
    background-color: red;
  }
</style>

我做了一個簡單的方塊，並用「資料(data)」決定是否加入紅色底色的class。

• class="box" 不管有沒有加底色，我都要它有一個正方形的灰框，所以我加入了共用class取名box。
• :class="{ red_color: coloring } 在這裡面red_color是我為想加入的 class name 取名，coloring 是我為數據屬性取的名子，它來決定是否加入。
• coloring: true 我用資料的Boolean(true or false)來決定「加」或「不加」。

太簡單了，跟本躺著學！那我們來加入更多變化吧！如果有多個不同class想動態增加呢？比如說多增加一個class決定是否為圓型！其實寫法都一樣，只要加入「,」號並接著寫就行了！另外補充一下，其實class name 也可以當成「文字」寫入喔！就直接把一開始的red_color當例子吧，知道文字屬性怎麼標示嗎？要用''包起，現在試試看吧：

<template>
  <div class="news">
    <div class="box" :class="{ 'red_color': coloring, round: shape }"></div>
  </div>
</template>

<script>
export default {
  name: 'news',
  data() {
    return {
      coloring: true,
      shape: true
    }
  }
}
</script>

<style scoped>
  .box {
    border: 1px solid #cccccc;
    width: 100px;
    height: 100px;
  }
  .red_color {
    background-color: red;
  }
  .round {
    border-radius: 50%;
  }
</style>

除了用以上方法加入class外，我們也可以把class name當成資料存在data裡，並用陣列的方式寫入，如下：

<template>
  <div class="news">
    <div :class="[div_style, coloring, shape]"></div>
  </div>
</template>

<script>
export default {
  name: 'news',
  data() {
    return {
      div_style: 'box',
      coloring: 'red_color',
      shape: 'round'
    }
  }
}
</script>

<style scoped>
  .box {
    border: 1px solid #cccccc;
    width: 100px;
    height: 100px;
  }
  .red_color {
    background-color: red;
  }
  .round {
    border-radius: 50%;
  }
</style>

要注意的是，用這種方式加入的話，data裡的資料class name要改為「文字屬性」喔！

那如果我想同時用兩種寫法呢？也可以的，用{}即可，如下寫法：

<template>
  <div class="news">
    <div :class="[div_style, coloring, { round: shape }]"></div>
  </div>
</template>

<script>
export default {
  name: 'news',
  data() {
    return {
      div_style: 'box',
      coloring: 'red_color',
      shape: true
    }
  }
}
</script>

那可以加到之前學的Component上嗎？當然一樣可以囉！Component不但可以直接加入class=""，另外也可以用今天學的方法加入，做法都一樣比如說：
<Card :class="{ 'red_color': coloring }">

接下來猜猜style行不行？哈哈，當然行！如下：

<template>
    <div :style="red_box">
</template>

<script>
    data: {
      red_box: {
        width: 100px;
        height: 100px;
        background-color: red;
        border: 1px solid #cccccc;
      }
    }
</script>

另外一樣可以用上面提到的陣列加！甚至可以用這種方法寫入瀏覽器相容性：
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

很方便吧！以上就是今天的學習內容~